import Taro, { Component } from "@tarojs/taro";
import { inject, observer } from '@tarojs/mobx'
import { IStoreProps } from '../../store/Stores'

import { View, Image, Text } from "@tarojs/components";
import { AtCurtain } from 'taro-ui'
import { serverHost, pageSize, subTime, showModel, servicePhone } from '../../utils/common'
import { CashOutput } from '../../api/api'
import './cashRecord.scss'

import icon_23 from "../../assets/img/icon_52.png";
import noneIcon from "../../assets/img/none_order.png";


interface IHomeProps extends IStoreProps { }

@inject("stores")
@observer
class MineProfitRecord extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: [] as CashOutput[],
    totalCount: 0,
    pageIndex: 1,
    pageSize,
    isOpened: false,
    reson: ''
  }

  componentWillMount(): void {
    this.getUserCashes()
  }

  getUserCashes() {
    let { userStore } = this.props.stores
    let { pageIndex, pageSize } = this.state
    userStore.userCashRecord({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({ totalCount: res.totalCount, items: res.items })
        } else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({ totalCount: res.totalCount, items })
        }
      }
    })
  }

  onReachBottom(): void {
    let { totalCount, pageSize, pageIndex } = this.state
    const { loading } = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getUserCashes()
      })
    }
  }

  onClose(reson: string) {
    this.setState({ isOpened: !this.state.isOpened, reson })
  }

  render() {
    let { items, isOpened, reson } = this.state

    return (
      <View className='mine-profit-record page-bg'>
        {
          items.length === -2 &&
          <View className='profit-total color-dark'>
            累计提现金额：{100}元
          </View>
        }
        <View className='mine-profit-record__main content-20'>
          {
            items.length > 0 &&
            <View className='list-03'>
              {
                items.map(item => {
                  let tpl = <View className='list-05__item'>
                    <Image className='list-05__avatar' src={icon_23} />
                    <View className='list-05__info'>
                      <View className='list-05__title'>收益提现</View>
                      <View className='list-05__date font-dark'>{subTime(item.creationTime)}</View>
                    </View>
                    <View className='list-05__profit'>
                      <View className='list-05__money'>-{item.amount}<Text className='small'>元</Text></View>
                      <View className='list-05__state color-theme'>{item.statusView}</View>
                    </View>
                  </View>

                  let tpl_reson = <View className='list-05__item' onClick={this.onClose.bind(this, item.reason || '')}>
                    <Image className='list-05__avatar' src={icon_23} />
                    <View className='list-05__info'>
                      <View className='list-05__title'>收益提现</View>
                      <View className='list-05__date font-dark'>{subTime(item.creationTime)}</View>
                    </View>
                    <View className='list-05__profit'>
                      <View className='list-05__money'>-{item.amount}<Text className='small'>元</Text></View>
                      <View className='list-05__state color-theme'>{item.statusView}</View>
                    </View>
                  </View>
                  return (
                    parseInt(item.status) !== -1 ? tpl : tpl_reson
                  )
                })
              }
            </View>
          }
          {
            items.length <= 0 &&
            <View className='none'>
              <Image className='none__icon' src={require('../../assets/img/common/none.png')} />
              <View className='none__desc desc'>暂时还没有任何提现记录！</View>
            </View>
          }
        </View>

        <AtCurtain
          isOpened={isOpened}
          onClose={this.onClose.bind(this)}
        >
          <View className='reson-wrap'>
            <View className='reson-title'>驳回原因</View>
            <View className='reson-con'>{reson || `驳回原因不明，请拨打客服电话(${servicePhone})处理`}</View>
          </View>
        </AtCurtain>

      </View>
    )
  }
}

export default MineProfitRecord
